<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>House Price</title>
<link rel="shortcut icon" href="favicon.ico" />
<!-- Load CSS -->
<link href="{{url_for('static', filename='css/style.css')}}" rel="stylesheet" type="text/css" />
<!-- Load Fonts -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic,bold,bolditalic" type="text/css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" type="text/css" />
<!-- Load jQuery library -->
<script type="text/javascript" src="{{url_for('static', filename='scripts/jquery-1.6.2.min.js') }}"></script>
<!-- Load custom js -->
<script type="text/javascript" src="{{url_for('static', filename='scripts/panelslide.js') }}"></script>
<script type="text/javascript" src="{{url_for('static', filename='scripts/custom.js') }}"></script>
<!-- Load topcontrol js -->
<script type="text/javascript" src="{{url_for('static', filename='scripts/scrolltopcontrol.js') }}"></script>
<!-- Load NIVO Slider -->
<link rel="stylesheet" href="{{url_for('static', filename='css/nivo-slider.css') }}" type="text/css" media="screen" />
<link rel="stylesheet" href="{{url_for('static', filename='css/nivo-theme.css') }}" type="text/css" media="screen" />
<script src="{{url_for('static', filename='scripts/jquery.nivo.slider.pack.js') }}" type="text/javascript"></script>
<script src="{{url_for('static', filename='scripts/nivo-options.js') }}" type="text/javascript"></script>
<!-- Load fancybox -->
<script type="text/javascript" src="{{url_for('static', filename='scripts/jquery.fancybox-1.3.4.pack.js' )}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='scripts/jquery.easing-1.3.pack.js' )}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='scripts/jquery.mousewheel-3.0.4.pack.js' )}}"></script>
<link rel="stylesheet" href="{{url_for('static', filename='css/jquery.fancybox-1.3.4.css' )}}" type="text/css" media="screen" />

</head>
<body>
  <!--This is the START of the header-->
  <div id="topcontrol" style="position: fixed; bottom: 5px; left: 960px; opacity: 1; cursor: pointer;" title="Go to Top"></div>
  <div id="header-wrapper">
    <div id="header">
      <div id="logo"><a href="/"><img src="{{url_for('static', filename='images/logo.png')}}" width="100" height="80" alt="logo" /></a></div>
      <div id="header-text">
        <h4>Scatter plot for 4 important factors</h4>
        <h6><a href="/">Home</a> → Heatmap</h6>
      </div>
    </div>
  </div>
  <!--END of header-->
  <!--This is the START of the menu-->
  <div id="menu-wrapper">
      <div id="main-menu" style="margin-top:-50px">
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/background">Background</a></li>
          <li><a href="/heatmap">Heatmap</a></li>
          <li><a class="selected" href="/describe">Describe →</a></li>
          <li><a href="/feature">Features</a></li>
          <li><a href="/data">Model</a></li>
        </ul>
      </div>
      <!--This is the START of the footer-->
      <div id="footer">
          <h6>© 2019 Kaggle Inc 
          <a href="https://www.kaggle.com/c/house-prices-advanced-regression-techniques" title="kaggle" target="_blank">
            House Prices: Advanced Regression Techniques</a></h6>
        </div>
        <!--END of footer-->
    </div>
  <!--END of menu-->
  <!--This is the START of the content-->
    <div class="row">
        <div class="col-xs-12  col-md-9" style = "margin-left:150px;margin-top:50px">
          <iframe src = "/scatter_sub" frameborder="1" width="1420" height="1345"></iframe>
        </div>
    </div>

  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3-tip.js"></script>

  <!--END of content-->
</body>
</html>